<html>
<head>
		<script type="text/javascript" src='../libs/yahoo.js'></script>
		<script type="text/javascript" src='../libs/animation.js'></script>
		<script type="text/javascript" src='../libs/dom.js'></script>
		<script type="text/javascript" src='../libs/event.js'></script>
		<script type="text/javascript" src='../libs/dragdrop.js'></script>
		<script type="text/javascript" src='../libs/json.js'></script>
		<script type="text/javascript" src='../libs/yui-ext.js'></script>
<script type="text/javascript">
YAHOO.example.init = function() {
   var xy = YAHOO.util.Dom.getXY('charpreviewimg');
   var x = xy[0];
   var y = xy[1];
   var w = this.offsetWidth;
   
   var attr = {
      points: { 
         to: xy, 
         control: [ [x - 50, y], [x - 25, y] ]
      }
   };
  
   var customElasticOut = function (t, b, c, d, a, p) {
      var p=d*0.1; // override default period for more snap (default is p=d*0.3)
   	return YAHOO.util.Easing.elasticOut(t, b, c, d, a, p);
   };
  
   var anim = new YAHOO.util.Motion('charpreviewimg', attr, 0.5, customElasticOut);
   YAHOO.util.Event.on('dmg', 'click', anim.animate, anim, true);

	//var dmg = document.createElement('div');
	//dmg.setAttribute('id','damage');
	//dmg.innerHTML='10';
	//document.documentElement.appendChild(dmg)
	var dxdy = YAHOO.util.Dom.getXY('inlinedmg');
	var dx = dxdy[0];
	var dy = dxdy[1];
	var dmgAttr={
		points: {
			to: dxdy,
			control: [[dx,-10]]
		}
	}
	var dmgAnim = new YAHOO.util.Motion('inlinedmg', dmgAttr, .8, YAHOO.util.Easing.bounceOut);
	YAHOO.util.Event.on('dmgval', 'click', dmgAnim.animate, dmgAnim, true);  
   

   //console.log(damage)

};
/**
YAHOO.example.damage = {
	dom: null,
	init: function(){
		this.dom = document.createElement('div');
		
	}

}
**/

YAHOO.util.Event.onAvailable('charpreviewimg', YAHOO.example.init);

</script>
		<style>
		.hideme, .damage{
			font-weight: bold;
			font-size: 2em;
			position: absolute;
			top: 30px;
			left: 50px;
		}
		.damage .top {
			position: absolute;
			color: red;
			top: 0px;
			left: 0px;
		}
		.damage .bot {
			position: absolute;
			color: white;
			top: 2px;
			left: 2px;
		}
		#charpreviewimg{
			width:128px;
			height:128px;
			xbackground-image:url('../img/characters_trans.gif');
			overflow: hidden;
			xborder: 1px solid red;
			position: relative;
		}
		#charpreviewimgsrc{
      		position: absolute;
      		top: 0px;
      		left: 0px;
    	}		
		
		</style>
</head>
<body>
<div id="charpreviewimg">
  <img id='charpreviewimgsrc' src="../img/characters_trans.gif">
</div>

<div id='inlinedmg' class='damage'>
<div class='bot'>10</div> <div class='top'>10</div> </div>
<button id='dmg'>Damage</button>
<button id='dmgval'>Damage Value</button>


</body>